
<template>
    <div style="width:100%;" class="container">
        <div slot="header" class="forms">
            <el-form ref="form" :model="form" label-width="80px" class="box">
                <el-form-item label="床位编号">
                    <el-input v-model="form.bednumber"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" style="height: 40px;margin-left: 10px;" @click="hangdleSerch">搜索</el-button>
            </el-form>
            <el-popconfirm title="确定删除吗？" @confirm="log">
                <el-button  slot="reference" style="float: right; padding: 3px 0;width: 80px;height: 40px;margin-right: 20px;">删除选中</el-button>
            </el-popconfirm>
        </div>
        <div class="tables">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                style="width: 100%;border: 1px solid #ebeef5;margin-top: 20px;"
                @selection-change="handleSelectionChange" >
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="床位编号" width="120">
                    <template slot-scope="scope">{{ scope.row.bednumber }}</template>
                </el-table-column>
                <el-table-column prop="department" label="所属科室" width="120">
                </el-table-column>
                <el-table-column prop="nurse" label="责任护士" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="配备氧气罐" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.oxygen ==0 ?  'x' : '√'
                    }}</template>
                </el-table-column>
                <el-table-column label="配备心电机" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.heart == 0 ? 'x' : '√'
                    }}</template>
                </el-table-column>
                <el-table-column label="配备呼吸机" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.breath == 0 ? 'x' : '√'
                    }}</template>
                </el-table-column>
                <el-table-column label="配备急救设备" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.icu == 0 ?  'x' : '√' }}</template>
                </el-table-column>
                <el-table-column label="空调地暖" show-overflow-tooltip>
                    <template slot-scope="scope">{{
                            scope.row.aircondition == 0 ? 'x' : '√'
                    }}</template>
                </el-table-column>
                <el-table-column label="电视外设" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.tv == 0 ?"x" :"√"}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="床位操作" show-overflow-tooltip width="100px">
                    <template slot-scope="scope"> <i class="el-icon-delete btn" @click="showDel(scope.row.id)"></i>
                        <i class="el-icon-edit-outline btn" @click="showEdit(scope.row)"></i></template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totals" style="margin-top:20px;">
            </el-pagination>
        </div>

        <!-- 编辑卡 -->
        <el-dialog title="床位管理" :visible.sync="outerVisible" class="edits">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="床位编号">
                    <el-input v-model="form.bednumber"></el-input>
                </el-form-item>
                <el-form-item label="所属科室">
                    <el-select placeholder="选择科室" v-model="form.department">
                        <el-option label="急诊科" value="急诊科"></el-option>
                        <el-option label="普通科" value="普通科"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="氧气罐">
                    <el-radio-group v-model="form.oxygen">
                        <el-radio label="是" value="1"></el-radio>
                        <el-radio label="否" value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="心电机">
                    <el-radio-group v-model="form.heart">
                        <el-radio label="是" value="1"></el-radio>
                        <el-radio label="否" value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="呼吸机">
                    <el-radio-group v-model="form.breath">
                        <el-radio label="是" value="1"></el-radio>
                        <el-radio label="否" value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="急救设备">
                    <el-radio-group v-model="form.icu">
                        <el-radio label="是" value="1"></el-radio>
                        <el-radio label="否" value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="空调地暖">
                    <el-radio-group v-model="form.aircondition">
                        <el-radio label="是" value="1"></el-radio>
                        <el-radio label="否" value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电视外设">
                    <el-radio-group v-model="form.tv">
                        <el-radio label="是" value="1"></el-radio>
                        <el-radio label="否" value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="责任护士">
                    <el-input v-model="form.nurse"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sureEdit">确认编辑</el-button>
            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="系统提示" :visible.sync="dialogVisible" class="edits">
            <div style="text-align:center;">
                您正在删除医务账号，此操作不可逆，确认删除吗？
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:150px;height: 30px;line-height: 30px;padding: 0;"
                    @click="del()">确定</el-button>
                <el-button type="info" style="width:150px;height: 30px;line-height: 30px;padding: 0;"
                    @click="dialogVisible = false">取消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import { api_bedtable_del, api_bedtable_list,api_bedtable_delss,api_bedtable_edit,api_bedtable_search} from "@/apis/indent";
export default {
    data() {
        return {
            //  aircondition: 0
            // bednumber: "A区1-2002"
            // breath: 0
            // department: "血液科"
            // heart: 1
            // icu: 0
            id:'',
            ids:[],
            // nurse: "月红疏"
            // oxygen: 0
            // tv: 0
            totals:10,
            tableData: [],
            multipleSelection: [],
            currentPage:1,
            pageSize: 10,
            form: {
                aircondition:'',
                bednumber:'',
                breath:'',
                department:'',
                heart:'',
                icu:'',
                nurse:'',
                oxygen:'',
                tv:''
            },
            isshow: false,
            outerVisible: false,
            innerVisible: false,
            dialogVisible: false,
            flag: true,
           serchs:{
            serch:''
           },
        }
    },
    created() {
        this.getBed()
    },
    methods: {
        //获取病床列表
        async getBed() {
            let res = await api_bedtable_list({ page: this.currentPage, size: this.pageSize })
            this.tableData = res.data.data
            this.totals = res.data.total
            // console.log(this.tableData);
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //切换每页条数
        handleSizeChange(size) {
            this.pageSize = size
            this.getBed()
        },
        //切换页码触发
        handleCurrentChange(page) {
            this.currentPage = page
            this.getBed()
        },
        //删除
        showDel(val){
            //显示删除
            this.dialogVisible =true
            this.id=val
            // console.log(val);
        },
        //确认删除
       async del(){
            let rel=await api_bedtable_del({id:this.id})
            console.log(rel);
            this.dialogVisible = false
            this.getBed()
        },
        //批量删除
        //获取参数ids
        handleSelectionChange(selection){
            this.ids = selection.map((item) => item.id);
        },
        async log(){
           let rel=await api_bedtable_delss({ids:this.ids})
           console.log(rel);
           this.getBed()
        },
        //编辑
        showEdit(val){
            this.outerVisible =true
            this.form=val
            console.log(this.form);
        },
        //确认编辑
       async sureEdit(){
           let rel=await api_bedtable_edit(this.form)
           this.getBed()
           this.outerVisible =false
           console.log(rel);
       },
       //搜索按钮
      async hangdleSerch(){
           let rel=await api_bedtable_search({page:this.currentPage,size:this.pageSize,bednumber:this.form.bednumber})
        //    console.log(rel);
           this.tableData=rel.data.data
       }

    },

}

</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;

    .tables {
        flex: 1;
        overflow: scroll;
    }
}

.forms {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;

    .box {
        display: flex;

        .el-button--primary {
            height: 0;
        }
    }
}

.btn {
    color: #66b1ff;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.dialog-footer {
    text-align: center;
}

.active {
    color: red;
}
</style>